<template>
	<view class="menubox lt0" :class="cn">
		<!-- 头部四个菜单 -->
		<view class="bj_between">
			<view class="mitem1box bj_center bj_sx">
				<image src="/static/page1/d1.png" mode="widthFix"></image>
				<view class="">
					Popular
				</view>
			</view>
			<view class="mitem1box bj_center bj_sx">
				<image src="/static/page1/d2.png" mode="widthFix"></image>
				<view class="">
					Slots
				</view>
			</view>
		</view>
		<view class="bj_between">
			<view class="mitem1box bj_center bj_sx">
				<image src="/static/page1/d3.png" mode="widthFix"></image>
				<view class="">
					Recent
				</view>
			</view>
			<view class="mitem1box bj_center bj_sx">
				<image src="/static/page1/d4.png" mode="widthFix"></image>
				<view class="">
					Favorite
				</view>
			</view>
		</view>

		<!-- 音乐播放界面 -->
		<view class="menuyybox">
			<view class="bj_evenly" style="padding-top: 10rpx;">
				<image src="/static/lm/1.png" mode="widthFix"></image>
				<image src="/static/lm/2.png" mode="widthFix"></image>
				<image src="/static/lm/3.png" mode="widthFix"></image>
				<image src="/static/lm/4.png" mode="widthFix"></image>
				<view class="por">
					<view class="uunum">
						1
					</view>
					<image src="/static/lm/5.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="tc" style="margin-top: 10rpx;">
				You Spin Me Round
			</view>
		</view>

		<!--两个按钮-->
		<view class="meuntybox bj_left">
			<image src="/static/lm/6.png" mode="widthFix"></image>
			<text>Aposta</text>
		</view>
		<view class="meuntybox bj_left">
			<image src="/static/lm/7.png" mode="widthFix"></image>
			<text>Agente</text>
		</view>

		<!--5个按钮-->
		<view class="meuntybox2">
			<view class="tc" style="margin-bottom: 10rpx;">
				Promoção
			</view>
			<view class="clearfloat">
				<view class="mtyitem" v-for="(item , i) in mlist1">
					<image :src="'/static/lm/'+i+'.jpg'" mode="widthFix"></image>
					<view class="mtyitemtxt">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<!--语言切换等按钮-->
		<view class="meuntybox bj_between">
			<view class="bj_left">
				<image src="/static/lm/8.png" mode="widthFix"></image>
				<text>Brazil</text>
			</view>
			<image src="/static/lm/l.png" style="width: 20rpx;" mode="widthFix"></image>
		</view>
		<view class="meuntybox bj_left">
			<image src="/static/lm/9.png" mode="widthFix"></image>
			<text>Baixar App</text>
		</view>
		<view class="meuntybox bj_left">
			<image src="/static/lm/10.png" mode="widthFix"></image>
			<text>FAQ</text>
		</view>

		<view class="f24 fwb" style="margin-top: 24rpx;margin-bottom: 12rpx;">
			Canal Oficial
		</view>
		<view class="meuntybox bj_left">
			<image src="/static/lm/11.png" mode="widthFix"></image>
			<text>Instagram</text>
		</view>
		<view class="meuntybox bj_left">
			<image src="/static/lm/12.png" mode="widthFix"></image>
			<text>Telegram</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 注册父级可调用的方法
	defineExpose({
		opmu,
		clmu
	})
	let cn = ref("")

	let mlist1 = ref([{
			name: "Eventos"
		},
		{
			name: "Reemboiso"
		},
		{
			name: "Pendiente"
		},
		{
			name: "Historial"
		},
		{
			name: "VIP"
		}
	])

	// 打开菜单
	function opmu() {
		cn.value = "menu_open"
	}
	// 关闭菜单
	function clmu() {
		cn.value = "menu_cl"
		setTimeout(function() {
			cn.value = ""
		}, 300)
	}
</script>

<style lang="scss">
	/* PC端适配 */
	@media (min-width: 768px) {
		.menubox {
			position: absolute !important;
		}
	}

	.menubox {
		width: 372rpx;
		overflow-y: auto;
		height: 100%;
		position: fixed;
		padding: 108rpx 24rpx 20rpx;
		background: #fff;
		z-index: 1000;
		transform: translateX(-100%);

		.mitem1box {
			width: 156rpx;
			height: 100rpx;
			background: #EFEFEF;
			border-radius: 12rpx;
			font-size: 24rpx;
			margin-bottom: 12rpx;

			image {
				width: 32rpx;
				margin-bottom: 8rpx;
			}
		}

		.menuyybox {
			height: 86rpx;
			background: #EFEFEF;
			border-radius: 12rpx;
			font-size: 20rpx;
			margin-bottom: 12rpx;

			.uunum {
				font-size: 20rpx;
				background: #E9C86F;
				border-radius: 100%;
				width: 36rpx;
				height: 24rpx;
				position: absolute;
				top: -10rpx;
				left: -20rpx;
				line-height: 24rpx;
				text-align: center;
				z-index: 1;
			}

			image {
				width: 32rpx;
			}
		}

		.meuntybox {
			height: 64rpx;
			background: #EFEFEF;
			border-radius: 12rpx;
			padding-left: 20rpx;
			font-size: 24rpx;
			margin-bottom: 12rpx;

			image {
				width: 32rpx;
				margin-right: 12rpx;
			}
		}

		.meuntybox2 {
			background: #EFEFEF;
			border-radius: 12rpx;
			font-size: 24rpx;
			padding: 10rpx 12rpx;
			margin-bottom: 12rpx;

			.mtyitem {
				width: 146rpx;
				position: relative;
				float: left;
				font-size: 22rpx;
				color: #FFFFFF;
				margin-bottom: 10rpx;

				.mtyitemtxt {
					position: absolute;
					left: 10rpx;
					top: 10rpx;
				}

				image {
					width: 100%;
				}
			}

			.mtyitem:nth-child(odd) {
				margin-right: 8rpx;
			}
		}
	}

	.menu_open {
		-webkit-animation: menu_opend 0.3s 1 linear;
		animation: menu_opend 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes menu_opend {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0%);
		}
	}

	.menu_cl {
		-webkit-animation: menu_cld 0.3s 1 linear;
		animation: menu_cld 0.3s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes menu_cld {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-100%);
		}
	}
</style>